<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ToDoList</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
      }

      body {
        background-color: #cdcdcd;
      }

      header {
        height: 50px;
        background: rgba(47, 47, 47, 0.98);
      }

      section {
        width: 600px;
        margin: 0 auto;
      }

      header section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
      }

      header section p {
        color: #ddd;
        font-size: 24px;
        cursor: pointer;
      }

      header section input {
        width: 50%;
        text-indent: 10px;
        border-radius: 5px;
        box-shadow: 0 1px 0 rgb(255 255 255 / 24%), 0 1px 6px rgb(0 0 0 / 45%) inset;
        border: none;
        outline: none;
        padding: 5px 10px;
      }

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .title h2 {
        margin: 20px 0;
      }

      .title span {
        padding: 0 5px;
        height: 20px;
        border-radius: 20px;
        background: #e6e6fa;
        line-height: 22px;
        text-align: center;
        color: #666;
        font-size: 14px;
      }

      .list li {
        height: 32px;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-left: 5px solid #629a9c;
        border-radius: 3px;
        margin-bottom: 10px;
      }

      .list input {
        width: 22px;
        height: 22px;
        margin-left: 20px;
        margin-right: 15px;
        cursor: pointer;
      }

      .list p {
        flex: 1;
      }

      .list a {
        width: 12px;
        height: 12px;
        border-radius: 12px;
        border: 6px double #fff;
        margin-right: 10px;
        background: #ccc;
        line-height: 14px;
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
      }

      a:hover {
        background-color: red;
      }
    </style>
  </head>

  <body>
    <header>
      <section>
        <p>ToDoList</p>
        <input type="text" placeholder="添加ToDo" id="add" />
      </section>
    </header>

    <main>
      <section>
        <!-- 正在进行的列表 -->
        <div class="doList">
          <div class="title">
            <h2>正在进行</h2>
            <span class="todoCount">0</span>
          </div>

          <ul class="list">
            <li>
              <input type="checkbox" />
              <p>吃饭</p>
              <a href="#"></a>
            </li>
          </ul>
        </div>

        <!-- 已完成的列表 -->
        <div class="doneList">
          <div class="title">
            <h2>已完成</h2>
            <span class="doneCount">0</span>
          </div>

          <ul class="list"></ul>
        </div>
      </section>
    </main>
    <script>
      //  获取输入框，并给输入框添加键盘事件，监听回车功能
      //  回车过后，将输入框的内容添加到正在进行列表中
      //  获取正在进行的列表，往该列表内添加任务
  
      var input = document.querySelector("#add");
      var undoList = document.querySelector(".doList .list");
      var doneList = document.querySelector(".doneList .list");
      var todoCount = document.querySelector(".todoCount");
      var doneCount = document.querySelector(".doneCount");
  
  
      // 封装数量更新函数
      function updateCount() {
        todoCount.innerText = undoList.children.length;
        doneCount.innerText = doneList.children.length;
      }
  
      // 封装任务核心逻辑
      function updateTask(e) {
        var nodename = e.target.nodeName.toLowerCase();
  
        if (nodename === 'input') {
          // 当点击的是 input 标签时，就是完成/取消完成功能
          if (e.target.checked) {
            doneList.appendChild(e.target.parentNode)
          } else {
            undoList.appendChild(e.target.parentNode)
          }
        } else if (nodename === 'a') {
          // 当点击的是 a 标签时，代表执行删除功能
          e.target.parentNode.remove();
        }
  
        // 更新任务数量
        updateCount();
      }
  
      // 页面一进来就更新一次数量，防止本身就存在一些任务
      updateCount();
  
  
      input.addEventListener("keyup", function (e) {
        // 如果不是回车键，则无需处理
        if (e.keyCode !== 13) return;
  
        undoList.innerHTML += `<li>
              <input type="checkbox" />
              <p>${input.value}</p>
              <a href="#"></a>
            </li>`
  
        // 更新任务数量
        updateCount();
  
        // 清空输入框
        input.value = "";
      })
  
      undoList.addEventListener("click", function (e) {
        updateTask(e);
      })
  
      doneList.addEventListener("click", function (e) {
        updateTask(e);
      })
    </script>
  </body>
</html>
